//导入createSlice函数
import {createSlice,PayloadAction,Dispatch} from '@reduxjs/toolkit'
import IRouteData from '@/types/IRouteData'
import {RouteObject} from 'react-router-dom'
import api from '@/api'
import IMenuData from '@/types/IMenuData'
import {withLoadable} from '@/utils/loadable'
/*
   通过createSlice函数来完成分片的创建
   创建分片语法
   createSlice(配置对象)
   配置对象的常见参数的说明
   {
       name:命名空间
       initState:初始化state状态数据
       reducers:{
          计算的方法
       }
   }
*/
const initialState:IRouteData={
    rows:[]
}
//创建切片对象
const routesSlice=createSlice({
    name:'routesNS',
    initialState,
    reducers:{
        /*
            reducers配置项中的方法有两个参数
            参数1:state状态机仓库中的数据
            参数2：action通知对象,action对象中有额外参数为payload
        */
        setStatebyRoutes(state:IRouteData,{payload}:PayloadAction<any[]>){
            console.log('------切片中的reducers方法-------------')
            state.rows=payload
        }
    }
})
//设置异步方法
export const getRoutesAsync=(routes:Array<RouteObject>)=>{
    /*
        该方法是异步异步方法，用来进行网路请求的，形参说明如下
        参数1:dispatch对象，作用来是用来向slice中reducer中某个方法派发请求的
    */
    return async(dispatch:Dispatch)=>{
        console.log('------切片的网路请求-------------')
        console.log('1、从组件传递来的routes',routes)
        const result=await api.users.getAuthMenus()
        console.log('2、从网络上获取',result.data.data)
        //向已有的路由集合中添加路由对象，构建新的路由表
        result.data.data.forEach((item:IMenuData)=>{
            if(item.children){
                item.children.forEach((subItem:IMenuData)=>{
                    const Modual=withLoadable(()=>import(`@/views${subItem.path}`))
                    routes[1].children?.push({
                        path:subItem.path,
                        element:<Modual/>
                    })
                })
            }
        })
        console.log('3、处理后的routes',routes)
        //调用dispatch来完成派发
        dispatch(setStatebyRoutes(routes))

    }
}

export const {setStatebyRoutes}=routesSlice.actions
export default routesSlice.reducer



